<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			用户名<input type="text" id="nameid" value="" onfocus="namefocus();"  onblur="nameblur();"/><br/>
			 密码<input type="password" name="" id="pwd" onfocus="pwdfocus();"  onblur="pwdblur();"/><br/>
			 <button type="button" id="tid" onclick="tidclick();">提交</button>
		</div>
		
	</body>
	<script type="text/javascript">
	function namefocus(){
		console.log('用户在输入名称')
	}
	function nameblur(){
		if(document.getElementById('nameid').value==''){
			alert('没有输入用户名');
		}else{
			console.log('输入完成')
		}
		
	}
	function pwdfocus(){
		console.log('用户在输入密码')
	}
	function pwdblur(){
		if(document.getElementById('pwd').value==''){
			alert('没有输入密码');
		}else{
			console.log('输入完成')
		}
		
	}
	function tidclick(){
		if(document.getElementById('pwd').value==''&& document.getElementById('nameid').value==''){
			alert('用户名和密码为空')
		}else
			if(document.getElementById('nameid').value==''){
				alert('用户名为空');
			} else if(document.getElementById('pwd').value==''){
			alert('密码为空');
			}
			else{
				console.log('提交成功')
			}
			
	}
		// 3.登入页面
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮
		
		// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	</script>
</html>
